<template>
	<view class="content">
		<image :src="src" mode=""></image>
		<view class="card">
			<view class="c_c">
				<view class="c_t">
					质保查询
				</view>
				<view class="c_s">
					<u-search :show-action="true" v-model="code" placeholder="手机号/质保卡号/车架号/车牌号"
						:showAction="false"></u-search>
					<view class="c_i" @click="chickItem(index)" v-for="(item,index) in ['漆面膜查询','改色膜查询','太阳膜查询']"
						:key="index">
						<view class="c_i_t">
							{{item}}
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		url
	} from '@/common/index.js'
	import {
		selectZb,
		getBg
	} from '@/common/api'
	export default {
		data() {
			return {
				code: "",
				src: ""
			}
		},
		onShow() {
			this.getBg()
		},
		methods: {
			async getBg() {
				let data = await getBg(117)
				console.log(data);
				this.src = url + data.rows[0].baUrl
			},
			async chickItem(index) {
				if (this.code == '') return this.$util.showTost("请输入查询条件")
				let data = await selectZb({
					quPhone: this.code,
					quTypeId: "10" + index
				})
				console.log(data);
				if (data.data.length > 0) {
					uni.navigateTo({
						url: "/pagesIndex/enterInfo/enterInfo?item=" + JSON.stringify(data.data)
					})
				} else {
					this.$util.showTost("未查询到相关信息")
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		position: relative;
		height: 100vh;
		background-color: #222;
	}

	image {
		height: 100vh;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.card {
		width: calc(100% - 60rpx);
		height: 600rpx;
		position: absolute;
		top: 20%;
		left: 0;
		z-index: 2;
		margin: 30rpx;
		border-radius: 20rpx;
		animation: moveRight 2s;
		/* 动画名称，持续时间，迭代次数 */
	}

	/* 定义动画 */
	@keyframes moveRight {
		from {
			transform: translateY(-200rpx);
		}

		to {
			transform: translateY(0);
			/* 从当前位置平移100像素 */
		}
	}

	.c_c {
		position: absolute;
		top: 20rpx;
		left: 0;
		z-index: 4;
		width: 100%;
		height: 100%;
	}

	.c_t {
		color: #fff;
		text-align: center;
	}

	.c_s {
		padding: 30rpx;
	}

	.c_i {
		width: 90%;
		height: 70rpx;
		margin: 50rpx auto;
		background-color: #444444;
		border-radius: 50rpx;
		text-align: center;
		line-height: 70rpx;
		opacity: 0.9;
	}

	.c_i_t {
		font-size: 30rpx;
		font-weight: 500;
		color: #fff;
	}
</style>